<template>
  <div class="detail wraper-box">
    <MHeader>课程详情</MHeader>
    <cube-popup type="my-popup" :mask-closable="true" ref="myPopup">
      <video controls width="100%" :src="videoUrl"></video>
    </cube-popup>
    <img ref="banner" :src="courseDetail.banner" @click="showPreview" width="100%" />
    <div class="tab-card content">
      <!--选项卡-->
      <cube-tab-bar v-model="selectedLabel" show-slider>
        <cube-tab label="课程介绍"></cube-tab>
        <cube-tab label="课程目录"></cube-tab>
        <cube-tab label="课程评价"></cube-tab>
      </cube-tab-bar>
      <cube-tab-panels v-model="selectedLabel">
        <cube-tab-panel label="课程介绍">
          <!--课程介绍-->
          <div class="panel-content introduce">
            <h2>{{courseDetail.name}}</h2>
            <p>
              <i class="iconfont icon-shijian"></i> 开课时间: 2020 10-30
            </p>
            <p>
              <i class="iconfont icon-jiage"></i>课程价额:
              <span>￥{{courseDetail.price}}</span>
            </p>
            <p>
              <template v-if="!courseDetail.hasCollect">
                <i class="iconfont icon-no-star"></i>
                <a @click="collect" ref="collect" key="1">点我收藏</a>
              </template>
              <template v-else>
                <i class="iconfont icon-star"></i>
                <a @click="canncelCollect" key="2" ref="collect">取消收藏</a>
              </template>
            </p>
          </div>
        </cube-tab-panel>
        <cube-tab-panel label="课程目录">
          <!--课程目录-->
          <div class="panel-content dir" ref="dir">
            <dl v-for="itemSection in courseDetail.section " :key="itemSection.name">
              <dt>
                <h4>{{itemSection.name}}</h4>
              </dt>
              <dd v-for="itemVideo in  itemSection.videos" :key="itemVideo.name">
                <span @click="palyVideos(itemVideo.video)">{{itemVideo.name}}</span>
              </dd>
            </dl>
          </div>
        </cube-tab-panel>
        <cube-tab-panel label="课程评价">
          <!--课程评价-->
          <div class="panel-content dir" ref="dir">
            <div
              class="panel-box"
              v-for="itemSection in courseDetail.commentlist "
              :key="itemSection._id"
            >
              <div class="panel-avatar">
                <img
                  :src="itemSection.from_id.avatar?itemSection.from_id.avatar:'/images/photo.png'"
                  alt
                />
              </div>
              <div class="panel-box-right">
                <p class="panel-box-right-title">
                  <span>{{itemSection.from_id.username}}</span>
                  <span v-if="itemSection.to_id">{{itemSection.to_id.username}}</span>
                  <span class="panel-box-right-date">{{dataTransfrom(itemSection.creatDate)}}</span>
                </p>
                <p class="panel-box-right-content">{{itemSection.content}}</p>
              </div>
            </div>
          </div>
        </cube-tab-panel>
      </cube-tab-panels>
    </div>
    <transition @enter="enter" @after-enter="afterEnter">
      <span class="animate" v-if="isShowAnimate"></span>
    </transition>
    <div class="detail-button current-state">
      <cube-button v-if="!courseDetail.order" :primary="true" @click="buyCourse">购买</cube-button>
      <cube-button v-if="!courseDetail.order&&(selectedLabel!=='课程评价')" @click="addCart">加入购物车</cube-button>
      <cube-button v-if="selectedLabel==='课程评价'" @click="comment">发表评论</cube-button>
    </div>
  </div>
</template>

<script>
import MHeader from "@/components/MHeader";
import img from "@/public/images/class1.png";
import * as types from "../store/types";
import { connect } from "net";
import { constants } from "crypto";
import { mapActions, mapState } from "vuex";
import { type } from "os";
export default {
  data() {
    return {
      courseDetail: {},
      selectedLabel: "课程介绍",
      imgs: [img],
      //   courseDetail.hasCollect: false, // 是否收藏
      isShowAnimate: false, // 控制动画显示
      videoUrl: ""
    };
  },
  // filters:{
  //   dataFilter(value){
  //     return this.$moment(value).fromNow()
  //   }
  // },
  created() {
    let id = this.$route.params.id;
    this.$store.dispatch("course/" + types.GET_COURSE_DETAIL, id).then(res => {
      this.courseDetail = res;
    });
  },
  computed: {
    ...mapState("account", ["username",["avatar"]])
  },
  mounted() {},
  components: {
    MHeader
  },
  methods: {
    ...mapActions("course", [types.DEL_COLLECT, types.COLLECT]),
    enter(el, done) {
      // 页面重绘
      let reflow = document.documentElement.clientHeight;
      let { x, y } = this.$refs.collect.getBoundingClientRect();
      el.style.background = `url(${this.$refs.banner.src})`;
      el.style.backgroundSize = "100% 100%";
      // 进入之前的位置 定位到最终的目的地
      // 增加动效 透明度等
      el.style.transform = `translate3d(${x}px,${y - 50}px,0) scale(0,0)`;
      el.style.transformOrigin = `left top`;
      // el.style.opacity = 0;
      el.addEventListener("transitionend", done);
    },
    afterEnter(el) {
      this.courseDetail.hasCollect = true;
    },
    // 取消收藏
    canncelCollect() {
      this[types.DEL_COLLECT](this.courseDetail._id).then(res => {
        this.courseDetail.hasCollect = false;
        this.isShowAnimate = false; // 直接隐藏
      });
    },
    // 收藏方法
    collect() {
      this[types.COLLECT](this.courseDetail._id).then(res => {
        this.isShowAnimate = true; // 出现动画
      });
    },
    showPreview() {
      // 显示预览图
      this.$createImagePreview({
        imgs: this.imgs
      }).show();
    },
    palyVideos(id) {
      this.$store
        .dispatch("video/" + [types.GET_VIDEO_DETAIL], id)
        .then(res => {
          this.videoUrl = res.videoUrl;
          const component = this.$refs["myPopup"];
          component.show();
        });
    },
    dataTransfrom(date) {
      return this.$moment(date).fromNow();
    },
    comment() {
      this.dialog = this.$createDialog({
        type: "prompt",
        title: "请输入评论",
        prompt: {
          value: "",
          placeholder: "请输入"
        },
        onConfirm: (e, promptValue) => {
          this.$store
            .dispatch("comment/" + types.ADD_COMMENT, {
              course: this.courseDetail._id,
              content: promptValue
            })
            .then(res => {
              // 前端赋值username
              res.from_id = {
                _id: res.from_id,
                username: this.username,
                avatar:this.avatar
              };
              this.courseDetail.commentlist.unshift(res);
            });
        }
      }).show();
    },
    buyCourse() {
      this.dialog = this.$createDialog({
        type: "confirm",
        title: "确认订单",
        content: `支付${this.courseDetail.price}元，购买《${this.courseDetail.name}》`,
        prompt: {
          value: "",
          placeholder: "请输入"
        },
        confirmBtn: { text: "购买" },
        onConfirm: (e, promptValue) => {
          this.$store
            .dispatch("course/" + types.BUY_COURSE, this.courseDetail._id)
            .then(res => {
              const toast = this.$createToast({
                type: "text",
                txt: "购买成功"
              });
              toast.show();
            });
        }
      }).show();
    },
    addCart() {
      this.$store.commit("course/" + types.ADD_CARLIST, this.courseDetail);
      const toast = this.$createToast({
        time: 1000,
        txt: "添加购物车成功",
        type: "text"
      });
      toast.show();
    }
  }
};
</script>

<style lang="stylus" scoped>
.panel-content
  padding 20px 5% 0
  .panel-box
    display flex
    flex-direction row
    justify-content center
    padding-bottom 20px
  .panel-avatar
    width 30px
    height 30px
    border-radius 50%
    overflow hidden
    img
      width 30px
  .panel-box-right
    flex 1
    margin-left 20px
  .panel-box-right-title
    display flex
    flex-direction row
    justify-content space-between
    color gray
    padding-bottom 10px
    .panel-box-right-date
      font-size 14px
  .panel-box-right-content
    min-height 40px
    background-color #f9f9f9
    padding 10px
.tab-card
  height calc(~'100vh - 275px')
  overflow hidden
.current-state
  position fixed
  bottom 0
dl
  position relative
  padding 0% 4%
  &::after
    content ''
    width 5px
    height 5px
    position absolute
    top 14px
    left 0
    transform translateX(-50%)
    border-radius 50%
    background #d7d7d7
  &::before
    content ''
    height 100%
    display block
    width 1px
    background #d7d7d7
    position absolute
    left 0
    top 14px
  color #777
  dt
    font-size 16px
    line-height 32px
  dd
    font-size 12px
    line-height 27px
.introduce
  font-size 14px
  h2
    font-size 16px
    font-weight bold
    line-height 32px
  i
    color #6db3ea
    padding-right 5px
  p
    line-height 32px
    color #777
    span
      color red
.dir
  /* *设置滚动区域高度 */
  height calc(100vh - 375px)
  overflow scroll
.animate
  width 100%
  height 175px
  position absolute
  top 50px
  left 0
  display block
  transition all 0.5s linear
  opacity 1
.detail-button
  display flex
  flex-direction row
  width 100%
</style>